<div class="modal-content" ng-class="{active: isCurrentTab('metadata')}" data-modal-tab-content="metadata" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.SERIES.NEW.METADATA.METADATA.TITLE"><!-- Title --></header>
        <div class="obj-container">
          <form novalidate name="outerForm">
            <table class="main-tbl">
              <tr ng-repeat="row in wizard.step.metadata['dublincore/series'].fields" >
                <td>{{ row.label | translate }} <i ng-show="row.required" class="required">*</i></td>
                <td admin-ng-editable
                    class="editable"
                    name="row.id"
                    params="row" save="$parent.wizard.save"
                    sanitize-xml="row.value" ng-model="row.value">
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-content" ng-if="wizard.step.visible" ng-class="{active: isCurrentTab('metadata-extended')}" data-modal-tab-content="metadata-extended" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div class="obj tbl-details" ng-repeat="(name, block) in wizard.step.ud">
        <header>{{ name }}</header>
        <div class="obj-container">
          <form novalidate name="outerForm">
            <table class="main-tbl">
              <tr ng-repeat="row in block.fields">
                <td>{{ row.label | translate }} <i ng-show="row.required" class="required">*</i></td>
                <td admin-ng-editable
                    class="editable"
                    name="row.id"
                    target="{{name}}"
                    params="row" save="$parent.wizard.save"
                    sanitize-xml="row.value" ng-model="row.value">
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="access" data-level="1" with-role="ROLE_UI_SERIES_DETAILS_ACL_VIEW">
  <div class="modal-body">

    <div data-admin-ng-notifications="" context="series-acl"></div>
    <div data-admin-ng-notifications="" type="warning" context="series-acl"></div>

    <div class="full-col">
      <ul>
        <li>
          <div class="obj list-obj">
            <header class="no-expand" translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.TITLE">
              <!-- Title -->
            </header>
            <div class="obj-container">

              <div class="obj tbl-list">

                <table class="main-tbl">
                  <thead>
                    <tr>
                      <th translate="EVENTS.SERIES.NEW.ACCESS.TEMPLATES.TITLE">
                        <!-- Templates -->
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <div class="obj-container padded">
                          <select chosen
                                  pre-select-from="wizard.step.acls"
                                  data-width="'200px'"
                                  tabindex="1"
                                  focushere
                                  ng-change="wizard.step.changeBaseAcl(wizard.step.ud.id)"
                                  ng-model="wizard.step.ud.id"
                                  ng-options="id as name for (id, name) in wizard.step.acls"
                                  placeholder-text-single="'{{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.LABEL' | translate }}'"
                                  no-results-text="'{{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.EMPTY' | translate }}'"
                                  ></select>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="obj-container" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_USER_ROLES_VIEW')">
              <div class="obj tbl-list">
                <header translate="EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.USERS">
                  <!-- Details -->
                </header>
                <div class="obj-container">
                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.USER">
                          <!-- User -->
                        </th>
                        <th class="fit">
                          <!-- Read -->
                          {{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.READ' | translate }}
                          <span title="{{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.HELP.READ' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th class="fit">
                          <!-- Write -->
                          {{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.WRITE' | translate }}
                          <span title="{{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.HELP.WRITE' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="wizard.step.hasActions">
                          <!-- Additional Actions -->
                        </th>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                          <!-- Action -->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="policy in wizard.step.ud.policiesUser">
                        <td>
                          <select chosen
                                  data-width="'360px'"
                                  ng-model="policy.role"
                                  ng-options="user.userRole as wizard.step.userToStringForDetails(user) for user in wizard.step.users"
                                  call-on-search="wizard.step.getMatchingRoles"
                                  data-placeholder=" "
                                  no-results-text="'{{ 'EVENTS.SERIES.NEW.ACCESS.USERS.EMPTY' | translate }}'"
                                  placeholder-text-single="'{{ 'EVENTS.SERIES.NEW.ACCESS.USERS.LABEL' | translate }}'">
                            <option value=""></option>
                          </select>
                        </td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.read" ng-disabled="wizard.step.aclCreateDefaults['read_readonly']"/></td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.write" ng-disabled="wizard.step.aclCreateDefaults['write_readonly']"/></td>
                        <td class="fit editable" ng-if="wizard.step.hasActions"><div admin-ng-editable-multi-select mixed="false" params="policy.actions" collection="wizard.step.actions"> </div></td>
                        <td class="fit"><a ng-click="wizard.step.deletePolicy(wizard.step.ud.policiesUser, policy)" class="remove"></a>
                        </td>
                      </tr>
                      <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')">
                        <td colspan="5"><a ng-click="wizard.step.addPolicy(wizard.step.ud.policiesUser)">+ {{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.NEW_USER' | translate }}</a></td>
                        <tr>
                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="obj-container" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_NONUSER_ROLES_VIEW')">
              <div class="obj tbl-list">
                <header translate="EVENTS.SERIES.DETAILS.ACCESS.ACCESS_POLICY.DETAILS">
                  <!-- Details -->
                </header>
                <div class="obj-container">
                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ROLE">
                          <!-- Role -->
                        </th>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.READ" class="fit">
                          <!-- Read -->
                        </th>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                          <!-- Write -->
                        </th>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="wizard.step.hasActions">
                          <!-- Additional Actions -->
                        </th>
                        <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                          <!-- Action -->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="policy in wizard.step.ud.policies">
                        <td>
                          <select chosen
                                  data-width="'360px'"
                                  ng-model="policy.role"
                                  ng-options="role as role for role in wizard.step.roles | filter: wizard.step.filterUserRoles"
                                  call-on-search="wizard.step.getMatchingRoles"
                                  data-placeholder=" "
                                  no-results-text="'{{ 'EVENTS.SERIES.NEW.ACCESS.ROLES.EMPTY' | translate }}'"
                                  placeholder-text-single="'{{ 'EVENTS.SERIES.NEW.ACCESS.ROLES.LABEL' | translate }}'">
                            <option value=""></option>
                          </select>
                        </td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.read" ng-disabled="wizard.step.aclCreateDefaults['read_readonly']"/></td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.write" ng-disabled="wizard.step.aclCreateDefaults['write_readonly']"/></td>
                        <td class="fit editable" ng-if="wizard.step.hasActions"><div admin-ng-editable-multi-select mixed="false" params="policy.actions" collection="wizard.step.actions"> </div></td>
                        <td class="fit"><a ng-click="wizard.step.deletePolicy(wizard.step.ud.policies, policy)" class="remove"></a>
                        </td>
                      </tr>
                      <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')">
                        <td colspan="5"><a ng-click="wizard.step.addPolicy(wizard.step.ud.policies)">+ {{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.NEW' | translate }}</a></td>
                        <tr>
                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="theme" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div class="obj quick-actions">
        <header class="no-expand "translate="EVENTS.SERIES.NEW.THEME.TITLE"><!-- Theme --></header>
        <div class="obj-container padded">
          <ul>
            <li>
              <p translate="EVENTS.SERIES.NEW.THEME.DESCRIPTION.TEXT">
              <!-- Theme Dialog Explanation Text -->
              </p>
              <p>
              <!-- Available Themes Dropdown -->
              <select chosen
                      pre-select-from="wizard.step.themes"
                      allow-single-deselect="true"
                      data-width="'100%'"
                      tabindex="1"
                      focushere
                      ng-change="wizard.step.themeSave()"
                      ng-model="wizard.step.ud.theme"
                      ng-options="id as list.name for (id, list) in wizard.step.themes"
                      placeholder-text-single="'{{ 'EVENTS.SERIES.NEW.THEME.LABEL' | translate }}'"
                      no-results-text="'{{ 'EVENTS.SERIES.NEW.THEME.EMPTY' | translate }}'"
                      >
                      <option value=""></option>
              </select>
              </p>
              <!-- Selected Theme Description Text -->
              <p ng-if="wizard.step.ud.themeDescription">{{ wizard.step.ud.themeDescription }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-content" ng-if="wizard.step.visible" data-modal-tab-content="tobira">
  <div class="modal-body">

    <div data-admin-ng-notifications="" context="series-tobira"></div>

    <div class="full-col">
      <div class="obj">
        <header class="no-expand" translate="EVENTS.SERIES.NEW.TOBIRA.CAPTION"><!-- Caption --></header>
        <div class="obj-container padded">
          <ul>
            <li>
              <p translate="EVENTS.SERIES.NEW.TOBIRA.DESCRIPTION">
                <!-- Tobira Dialog Explanation Text -->
              </p>
            </li>
          </ul>
        </div>
        <div class="obj-container padded" ng-if="!wizard.step.error">
          <div class="obj">
            <header>
              <span translate="EVENTS.SERIES.NEW.TOBIRA.SELECT_PAGE"><!-- Select a page --></span>
            </header>
            <nav class="breadcrumb">
              <a class="breadcrumb-link" ng-repeat="breadcrumb in wizard.step.ud.breadcrumbs" ng-click="wizard.step.back($index)">
                {{breadcrumb.segment === '' ? ('EVENTS.SERIES.NEW.TOBIRA.HOMEPAGE' | translate) : breadcrumb.title}}
              </a>
            </nav>
            <div class="obj-container">
              <table class="main-tbl highlight-hover">
                <thead>
                  <tr>
                    <th translate="EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE">
                      <!-- Page Title -->
                    </th>
                    <th translate="EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT">
                      <!-- Path segment -->
                    </th>
                    <th class="medium" translate="EVENTS.SERIES.NEW.TOBIRA.SUBPAGES">
                      <!-- Subpages -->
                    </th>
                    <th ng-if="wizard.step.editing" class="tiny"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="page in wizard.step.currentPage.children" ng-class="{ info: page === wizard.step.ud.selectedPage }">
                    <td ng-switch="!!page.new">
                      <input ng-switch-when="true" placeholder="{{ 'EVENTS.SERIES.NEW.TOBIRA.PAGE_TITLE' | translate }}" ng-model="page.title">
                      <a ng-switch-when="false" ng-class="{ 'tobira-selectable': !page.blocks.length }" ng-click="page.blocks.length || wizard.step.select(page)">{{page.title}}</a>
                    </td>
                    <td ng-switch="!!page.new">
                      <code class="tobira-path">
                        <input ng-switch-when="true" placeholder="{{ 'EVENTS.SERIES.NEW.TOBIRA.PATH_SEGMENT' | translate }}" ng-model="page.segment" ng-change="wizard.step.updatePath(page)">
                        <span ng-switch-when="false">{{page.segment}}</span>
                      </code>
                    </td>
                    <td>
                      <a ng-if="!page.new || wizard.step.isValid() && page.title" class="details-link" translate="EVENTS.SERIES.NEW.TOBIRA.SUBPAGES" ng-click="wizard.step.goto(page)"><!-- Subpages --></a>
                    </td>
                    <td ng-if="wizard.step.editing">
                      <a ng-if="page.new" ng-click="wizard.step.select(null)" title="{{ 'EVENTS.SERIES.NEW.TOBIRA.CANCEL' | translate }}" class="remove"></a>
                    </td>
                  </tr>
                  <tr ng-if="!wizard.step.editing">
                    <td colspan="3">
                      <a ng-click="wizard.step.addChild()">+ {{'EVENTS.SERIES.NEW.TOBIRA.ADD_SUBPAGE' | translate}}</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="obj-container padded">
          <ul>
            <li ng-switch="!!wizard.step.ud.selectedPage && wizard.step.isValid()">
              <div data-admin-ng-notifications="" context="series-tobira-new"></div>
              <div data-admin-ng-notifications="" context="series-tobira-existing"></div>
              <p ng-switch-when="true">
                {{'EVENTS.SERIES.NEW.TOBIRA.SELECTED_PAGE' | translate}}:
                <code class="tobira-path">{{wizard.step.ud.selectedPage.path}}</code>
              </p>
              <p ng-switch-when="false" translate="EVENTS.SERIES.NEW.TOBIRA.NO_PAGE_SELECTED">
                <!-- Series will not be mounted in Tobira -->
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="summary" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div data-admin-ng-notifications="" context="series-form"></div>
      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.SERIES.NEW.METADATA.CAPTION"><!-- Caption --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <tr ng-repeat="userEntry in wizard.states[0].stateController.getUserEntries()" ng-if="userEntry.presentableValue">
              <td>{{ userEntry.label | translate }}</td>
              <td>{{ userEntry.presentableValue | translate }}</td>
              <tr>
          </table>
        </div>
      </div>

      <div class="obj tbl-list" ng-if="wizard.getStateControllerByName('metadata-extended').visible && wizard.getStateControllerByName('metadata-extended').getFiledCatalogs().length > 0">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.METADATA_EXTENDED.CAPTION">
          <!--Metadata Extended-->
        </header>
        <div class="obj-container">
          <table class="main-tbl" ng-repeat="(name, block) in wizard.getStateControllerByName('metadata-extended').getFiledCatalogs()">
            <tr ng-repeat="field in block.fields" ng-if="field.presentableValue">
              <td>{{ field.label | translate }}</td>
              <td>{{ field.presentableValue }}</td>
              <tr>
          </table>
        </div>
      </div>

      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.SERIES.NEW.ACCESS.CAPTION"><!-- Caption --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <thead>
              <tr>
                <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ROLE">
                  <!-- Role -->
                </th>
                <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.READ" class="fit">
                  <!-- Read -->
                </th>
                <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                  <!-- Write -->
                </th>
                <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="wizard.getStateControllerByName('access').hasActions">
                  <!-- Additional Actions -->
                </th>
              </tr>
            </thead>
            <tr ng-repeat="policy in wizard.getStateControllerByName('access').getAllPolicies()">
              <td>{{ policy.role }}</td>
              <td class="fit"><input type="checkbox" disabled ng-model="policy.read"/></td>
              <td class="fit"><input type="checkbox" disabled ng-model="policy.write"/></td>
              <td class="fit" ng-if="wizard.getStateControllerByName('access').hasActions"><div ng-repeat="customAction in policy.actions.value">{{ customAction }}</div></td>
            </tr>
          </table>
        </div>
      </div>

      <div class="obj tbl-list" ng-if="wizard.getStateControllerByName('theme').ud.theme
          && wizard.getStateControllerByName('theme').themes.hasOwnProperty(wizard.getStateControllerByName('theme').ud.theme)">
        <header class="no-expand" translate="EVENTS.SERIES.NEW.THEME.CAPTION"><!-- Caption --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <tr>
              <td translate="EVENTS.SERIES.NEW.THEME.CAPTION"><!-- Caption --></td>
              <td>
                {{wizard.getStateControllerByName('theme').themes[wizard.getStateControllerByName('theme').ud.theme].name}}
              </td>

            </tr>
          </table>
        </div>
      </div>

      <div class="obj tbl-list" ng-if="wizard.getStateControllerByName('tobira').ud.selectedPage">
        <header class="no-expand" translate="EVENTS.SERIES.NEW.TOBIRA.CAPTION"><!-- Caption --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <tr>
              <td translate="EVENTS.SERIES.NEW.TOBIRA.PATH"><!-- Path --></td>
              <td>
                <code class="tobira-path">
                  {{wizard.getStateControllerByName('tobira').ud.selectedPage.path}}
                </code>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
